<template>
    <div class="w100 h100" style="overflow: auto;">
        <table style="width: 90%; margin: 0 auto;">
            <tbody>
            <tr style="height: 400px;">
                <td></td>
                <!-- 轮播图 -->
                <td>
                    <div class="carousel-container">
                        <div class="carousel-wrapper" style="text-align: center; width: 100%;">
                            <img class="carousel-item mcp" v-for="(image, index) in images" :key="index" :src="image"/>
                        </div>
                    </div>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <div style="margin-left: -10px; margin-top: 80px;">
                        <img src="/assets/svg/clickpage_left.svg"/>
                    </div>
                </td>
                <td>
                    <div class="inline ft">酒吧热门歌单</div>
                    <div class="inline" style="margin-left: 5px;">
                        <img src="http://localhost:8099/assets/svg/home_playlist_title_right.svg"/>
                    </div>
                    <div class="ft" style="color: rgb(255, 210, 26);">NATIONAL ARTIST</div>
                    <table class="w100" style="margin-top: 50px;">
                        <tbody>
                        <tr>
                            <td>
                                <template v-for="image in hotMusicList">
                                    <div class="inline">
                                        <img :src="image.img" style="width: 210px; height: 210px; margin-right: 30px;"/><br/>
                                        <div style="width: 210px;">{{image.title}}</div>
                                    </div>
                                </template>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </td>
                <td>
                    <div style="margin-left: 10px; margin-top: 80px;" class="inline">
                        <img src="/assets/svg/clickpage_right.svg"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="margin-left: -10px; margin-top: 180px;">
                        <img src="/assets/svg/clickpage_left.svg"/>
                    </div>
                </td>
                <td>
                    <div style="margin-top: 100px;">
                        <div class="inline ft">全国艺人</div>
                        <div class="inline" style="margin-left: 5px;">
                            <img src="http://localhost:8099/assets/svg/home_playlist_title_right.svg"/>
                        </div>
                        <div class="ft" style="color: rgb(255, 210, 26);">POPULARBARPLAYLISTS</div>
                        <table class="w100" style="margin-top: 50px; text-align: center;">
                            <tbody>
                            <tr>
                                <td v-for="image in allAuthorList">
                                    <div class="inline mcp" style="text-align: center;">
                                        <img :src="image.img"
                                             style="width: 114px; height: 114px;border-radius: 50%;"/><br/>
                                        <div>{{image.userName}}</div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
                <td>
                    <div style="margin-left: 10px; margin-top: 180px;" class="inline">
                        <img src="/assets/svg/clickpage_right.svg"/>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "index.vue",
        data() {
            return {
                // 轮播图
                images: [
                    'http://localhost:8099/assets/lbt/lbt_1.png',
                    'http://localhost:8099/assets/lbt/lbt_2.png',
                    'http://localhost:8099/assets/lbt/lbt_3.png',
                ],

                // 酒吧热门歌单
                hotMusicList: [{
                    img: 'http://localhost:8099/img/hotMusicList/1.png',
                    title: 'Jeremih - Birthday Sex (Gin And Sonic Remix) (Intro Clean)',
                    author: '', bgm: '', style: ''
                }, {
                    img: 'http://localhost:8099/img/hotMusicList/2.png',
                    title: 'Jeremih - Birthday Sex (Gin And Sonic Remix) (Intro Clean)',
                    author: '', bgm: '', style: ''
                }, {
                    img: 'http://localhost:8099/img/hotMusicList/3.png',
                    title: 'Jeremih - Birthday Sex (Gin And Sonic Remix) (Intro Clean)',
                    author: '', bgm: '', style: ''
                }, {
                    img: 'http://localhost:8099/img/hotMusicList/4.png',
                    title: 'Jeremih - Birthday Sex (Gin And Sonic Remix) (Intro Clean)',
                    author: '', bgm: '', style: ''
                }, {
                    img: 'http://localhost:8099/img/hotMusicList/5.png',
                    title: 'Jeremih - Birthday Sex (Gin And Sonic Remix) (Intro Clean)',
                    author: '', bgm: '', style: ''
                }],

                // 全国艺人列表
                allAuthorList: [{
                    img: 'http://localhost:8099/img/allAuthorList/1.png',
                    userName: 'Davea Butler',
                    fsCount: 10002
                }, {
                    img: 'http://localhost:8099/img/allAuthorList/2.png',
                    userName: 'Ivan Polo',
                    fsCount: 10002
                }, {
                    img: 'http://localhost:8099/img/allAuthorList/3.png',
                    userName: 'Athar Malakooti',
                    fsCount: 10002
                }, {
                    img: 'http://localhost:8099/img/allAuthorList/4.png',
                    userName: 'Nguyễn Quế Anh',
                    fsCount: 10002
                }, {
                    img: 'http://localhost:8099/img/allAuthorList/5.png',
                    userName: 'Emilee Simchenko',
                    fsCount: 10002
                }, {
                    img: 'http://localhost:8099/img/allAuthorList/6.png',
                    userName: 'Otmar Doležal',
                    fsCount: 10002
                }, {
                    img: 'http://localhost:8099/img/allAuthorList/7.png',
                    userName: 'Zhan Huo',
                    fsCount: 10002
                }]

            }
        },
        methods: {}
    }
</script>

<style scoped>
    .carousel-item {
        width: 33%;
        border-radius: 30px;
        border: 2px solid gray;
        max-height: 300px;
    }

    @font-face {
        font-family: 'apple';
        src: url("/assets/font/road_rage.ttf");
        font-style: normal;
        font-weight: normal;
    }

    .ft {
        font-family: 'apple', sans-serif;
    }
</style>
